<template>
  <q-list padding>
    <template v-for="(node, index) in paramList" :key="index">
      <q-expansion-item
        dense
        dense-toggle
        expand-separator
      >
        <template v-slot:header>
          <q-item-section>
            <div style="font-weight: bolder">
              数据{{index+1}}
            </div>
          </q-item-section>

          <q-item-section side>
            <q-btn
              dense
              flat
              icon="mdi-trash-can-outline"
              @click="removeDataItem(index)"
            />
          </q-item-section>
        </template>
        <table class="my-data-item-table">
          <tr>
            <td class="my-label">变量ID:</td>
            <td class="my-value">
              <VariableSelectBox
                v-model:name="node.nodeValue"
                v-model:data="node.variableValue"
                :project-arr="projectListArr"
              />
            </td>
          </tr>
          <tr>
            <td class="my-label">变量名:</td>
            <td class="my-value">
              <q-input
                dense
                outlined
                readonly
                type="text"
                v-model.lazy="node.nodeValue"
              />
            </td>
          </tr>
        </table>
      </q-expansion-item>
    </template>
  </q-list>
</template>

<script lang="ts">
import {
  defineAsyncComponent,
  defineComponent,
  onMounted,
  PropType, ref,
  toRefs, watch
} from 'vue';
import { CDataNode } from 'stores/editorModels';
import { cataItem } from 'src/hook/common/useCatalogType';

const VariableSelectBox = defineAsyncComponent(() => import('../combination/VariableSelectBox.vue'));

export default defineComponent({
  name: 'DataItemInput',
  components: {
    VariableSelectBox
  },

  props: {
    dataList: {
      type: Array as PropType<CDataNode[]>,
      default: () => {
        return [];
      }
    },

    projectListArr: {
      type: Array as PropType<cataItem[]>,
      default: () => {
        return [];
      }
    }
  },

  emits: ['data-info'],
  setup (props, context) {
    //解构
    const {
      dataList,
      projectListArr
    } = toRefs(props);

    //响应数据
    let paramList = ref<CDataNode[]>([]);

    //删除节点
    const removeDataItem = (index: number) => {
      if (paramList.value.length > index) {
        paramList.value.splice(index, 1);
        context.emit('data-info', paramList.value);
      }
    }

    //初始化
    const init = () => {
      paramList.value.length = 0;
      dataList.value.forEach((item) => {
        paramList.value.push(item);
      });
    }

    //监测dataList变化
    watch(() => dataList, () => {
      init();
    }, { deep: true });

    //挂载组件
    onMounted(() => {
      init();
    });

    return {
      paramList,
      projectListArr,
      removeDataItem
    };
  }
});

</script>

<style lang="scss" scoped>
.my-data-item-table {
  .my-label {
    text-align: left;
    width: 30%;
    height: 30px;
  }
  .my-value {
    text-align: left;
    width: 65%;
  }
}
</style>
